<template>
	<view class="orderDetails">	
		<view class="top">
			<view class="state">
				<view class="right">
					<text>{{info.order_status_name}}</text>
				</view>
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/order_ok.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="goods" style="border-bottom: 1upx solid #ddd;" @click="jump('store_view', info.merchantId)">
			<image :src="info.merchantPicture" mode="aspectFill" style="width: 50upx;height: 50upx;"></image>
			<text>{{info.merchantName}}</text>
		</view>
		<view class="goods" v-for="(item,index) in info.product_list" :key="index" >
			<view class="right">
				<text>{{item.product_name}}</text>
				<text class="through">￥{{item.cost_money}}</text>
				<text class="red">￥{{item.adjust_money}}</text>
			</view>
		</view>
		<view class="line" v-if="info.payInfo.coupon_money > 0">
			<text>优惠券抵扣</text>
			<text>-{{'￥'+info.payInfo.coupon_money}}</text>
		</view>
        <view class="line" v-if="info.payInfo.reduction_money > 0">
        	<text>减免金额</text>
        	<text>-{{'￥'+info.payInfo.reduction_money}}</text>
        </view>
        <view class="line" v-if="info.payInfo.use_hdq > 0">
        	<text>互动券抵扣</text>
        	<text>-{{'￥'+info.payInfo.use_hdq}}</text>
        </view>
        <view class="line" v-if="info.payInfo.pay_tea_money > 0">
        	<text>中茶抵扣</text>
        	<text>-{{'￥'+info.payInfo.pay_tea_money}}(手续费：{{info.payInfo.charge_tea_money}})</text>
        </view>
		<view class="pic">
			<text>{{info.payInfo.pay_type_name}}：</text>
			<text>{{'￥'+info.payInfo.pay_money}}</text>
		</view>
		<view class="pic">
			<text>中茶奖励：</text>
			<text>{{info.payInfo.reward_tea}}g = ￥{{info.payInfo.reward_tea_money}}</text>
		</view>
		<view class="info">
			<text>订单信息：</text>
			<text>订单号码：{{info.order_sn}}</text>
			<text>下单时间：{{info.create_time}}</text>
			<text v-if="info.pay_time != ''">支付时间：{{info.pay_time}}</text>
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				id : 0,
				info : {
					order_status: -1,
					order_status_name: '',
					merchantName: '',
					receiver_name: '',
					receiver_mobile: '',
					receiver_region_name: '',
					receiver_address: '',
					product_money: 0,
					coin_money: 0,
					shipping_money: 0,
					order_money: 0,
					buyer_message: '',
					order_sn: '',
					create_time: '',
					pay_time: '',
					payInfo: {
						coupon_money : 0,
						reduction_money : 0,
						use_hdq: 0,
						pay_tea_money: 0,
						charge_tea_money: 0,
						pay_type_name: '',
						pay_money: 0,
						reward_tea: 0,
						reward_tea_money: 0
					}
				},
			}
		},
		methods: {
			getInfo() {
				var self = this;
				serve.request({
					url: '/member/order/view',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: self.id
					}
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title:res.message,
							icon: 'none',
							success() {
								setTimeout(function () {
									self.jump('return_one')
								}, 2000) 
							}
						});
					}
					uni.hideLoading();
					self.info = res.data;
				});
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.id=options.id || 0;
			if(this.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							common.jump('return_one')
						}, 2000) 
					}
				});
			}
		},
		onShow() {
			uni.showLoading({
				title: '加载中···',
				mask: true
			});
			this.getInfo();
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中···',
				mask: true
			});
			this.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		    .orderDetails {
		        padding-bottom: 124upx !important;
				.bot{
					 padding-bottom: 12px !important;
				}
		    }
		}
	.orderDetails {
		padding-bottom: 100upx;

		.top {
			position: relative;
			border-bottom: 16upx rgba(251, 251, 253, 1) solid;

			.state {
				position: relative;
				box-sizing: border-box;
				// padding: 58upx 48upx;
				width: 100%;
				height: 250upx;
				// background: #F5F5FE;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				font-size: 48upx;
				font-family: YouSheBiaoTiHei;
				font-weight: bold;
				color: #333333;
				image {
					position: absolute;
					width: 100%;
					height: 250upx;
					z-index: 0;
				}
				.right{
					position: relative;
					z-index: 10;
					display: flex;
					flex-direction: column;
					padding-left: 30upx;
					// width: 280upx;
					.time {
						// position: absolute;
						// bottom: 18upx;
						color: #333333;
						font-size: 20upx;
						font-style:normal;
						font-weight: 400;
						margin-top: 14upx;
					}
				}

				
			}
            .line1{
				box-sizing: border-box;
				display: flex;
				padding: 0upx 30upx;
				height: 130upx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1upx rgba(53,63,110,0.06) solid;
				.left{
					display: flex;
					align-items: center;
					font-size: 28upx;
					color: #666666;
					image{
						width:40upx;
						height:29upx;
						margin-right: 13upx;
					}
				}
				.right{
					color: #EB5938;
					font-size: 28upx;
					font-weight: bold;
				}
			}
			.img {
				position: absolute;
				bottom: 0;
				height: 10upx;
				width: 100%;
			}
		}

		.goods {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 40upx 30upx;
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;

			image {
				width: 170upx;
				height: 170upx;
				margin-right: 20upx;
			}

			.right {
				width: 100%;
				display: flex;
				font-size: 32upx;
				text {
					width: 33.3%;
					font-size: 32upx;
					position: relative;
				}
			}
		}

		.line {
			box-sizing: border-box;
			padding: 37upx 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28upx;
			// font-weight: bold;
			color: #666666;
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;

			text:last-child {
				color: #FF5F60;
				font-size: 32upx;
			}

			;
		}

		.pic {
			box-sizing: border-box;
			padding: 37upx 30upx;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			font-size: 28upx;
			color: #999999;
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;

			text:last-child {
				color: #FF5F60;
				font-size: 32upx;
				font-weight: bold;
			}

			;
		}

		.info {
			display: flex;
			flex-direction: column;
			padding: 47upx 30upx;
			font-size: 28upx;
			color: #666666;

			text:first-child {
				font-weight: bold;
				margin-top: 0upx;
				color: #333333;
			}

			text {
				font-weight: 400;
				margin-top: 20upx;
			}
		}
	
		.through{
			text-decoration: line-through;
			text-align: center;
		}
		
		.red{
			color: #EB5938;
			text-align: right;
		}
	}
</style>
